<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <div id="container"></div>
	
			    <script src="js/jquery.min.js"></script>
	<script src="js/Three.js"></script>
    <script src="js/RequestAnimationFrame.js"></script>
   
	<script type="x-shader/x-vertex" id="vertexshader">

			#ifdef GL_ES
		precision highp float;
		#endif
		
        //gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);


const float bendRadius = 2.4;
const float bendAmount = 0.75;
	//attribute vec4 position;
	//attribute vec2 texCoord;
	//varying vec2 v_texCoord;
void main() {
    //v_texCoord = texCoord;

  vec4 wp = objectMatrix * vec4(position, 1);
  float longitude = 3.14159 * 0.5 - wp.x;
  float latitude = 3.14159 * 0.5 - wp.y;
  float sinTheta = sin(longitude);
  float cosTheta = cos(longitude);
  float sinPhi = sin(latitude);
  float cosPhi = cos(latitude);
  float ux = cosTheta * sinPhi;
  float uy = cosPhi;
  float uz = sinTheta * sinPhi;
  vec4 wp1 = vec4(
    ux * bendRadius,
    uy * bendRadius,
    uz * bendRadius,
    1);
  vec4 wp2 = vec4(wp.x, wp.y, wp.z + bendRadius, 1.0);
    gl_Position = projectionMatrix * viewMatrix * mix(wp2, wp1, bendAmount);
}
    </script>
    <script type="x-shader/x-fragment" id="fragmentshader">
				#ifdef GL_ES
		precision highp float;
		#endif
    void main()
    {
        gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);
    }
    </script>
    </body>
    
	   	<script type="text/javascript">

// set the scene size
var WIDTH = 1024,
    HEIGHT = 1024;

// set some camera attributes
var VIEW_ANGLE = 60,
    ASPECT = WIDTH / HEIGHT,
    NEAR = 1,
    FAR = 5000;

var renderer, camera, scene;
var sphere;

// Globals for the 'Globe'
//
var g_imagesAcrossGrid = 10;
var g_imagesDownGrid = 10;
var g_tilesize = 512;

var g_imageScale = 0.304;
var g_imageWidth = 1;
var g_imageHeight = 1;
var g_imageSpacing = 1;

var eyeRadius = 5;

var g_ui = [
  { obj: 'globals',         name: 'imageScale',         value: 0.304,max:   0.536, min: 0.05 },
  { obj: 'globals',         name: 'imageWidth',         value: 1.0,  max:   5 },
  { obj: 'globals',         name: 'imageHeight',        value: 1.0,  max:   5 },
  { obj: 'globals',         name: 'imageSpacing',       value: 1.03, max:   2.118, min: 1 },
  { obj: 'globals',         name: 'rowOffset',          value: 0.5,  max:   2 },
  { obj: 'globals',         name: 'eyeRadius',          value: 5,    max:  10, min: 3.474 },
  { obj: 'globals',         name: 'selectionIntensity', value: 0,    max:  10 },
  { obj: 'imagePlaneConst', name: 'bendRadius',         value: 2.4,  max:  10 },
  { obj: 'imagePlaneConst', name: 'bendAmount',         value: 0,  max:   1 }];
  
  function computeUnitSize() 
  {
  return {
    width: g_imageWidth * g_imageSpacing * g_imageScale,
    height: g_imageHeight * g_imageSpacing * g_imageScale
  };
}
  function computeSphereGridInfo() 
  {
  var unit = computeUnitSize();
  var halfCircumfrence = Math.PI;
  var imagesAcrossSphere = Math.floor(halfCircumfrence / unit.width);
  var imagesDownSphere = Math.floor(halfCircumfrence / unit.height);
  var gridXOff = Math.floor(imagesAcrossSphere * -0.5);
  var gridYOff = Math.floor(imagesDownSphere * -0.5);
  var xOff = 0; //tdl.math.modClamp(g_scrollX % 1, 1);
  var yOff = 0; //tdl.math.modClamp(g_scrollY % 1, 1);
  var texXBase = -5; //-tdl.math.modClamp(Math.floor(g_scrollX - gridXOff), g_imagesAcrossGrid);
  var texYBase = -5; //-tdl.math.modClamp(Math.floor(g_scrollY - gridYOff), g_imagesDownGrid);

  return {
    unit: unit,
    imagesAcrossSphere: imagesAcrossSphere,
    imagesDownSphere: imagesDownSphere,
    gridXOff: gridXOff,
    gridYOff: gridYOff,
    xOff: xOff,
    yOff: yOff,
    texXBase: texXBase,
    texYBase: texYBase,
  };
}

function init()
{
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(WIDTH, HEIGHT);
	renderer.setClearColor(new THREE.Color(0x000000), 1); 

    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
    camera.position = new THREE.Vector3(0, 0, eyeRadius);

    scene = new THREE.Scene();

    // attach the render-supplied DOM element
    var container = document.getElementById("container");
    container.appendChild(renderer.domElement);


    var shaderMaterial = new THREE.ShaderMaterial(
    {
        vertexShader: $('#vertexshader').text(),
        fragmentShader: $('#fragmentshader').text(),
		wireframe: true
    });


	/*
	gl.colorMask(true, true, true, true);
    gl.depthMask(true);
    gl.clearDepth(1);
    gl.clearColor(0,0,0,1);

    gl.enable(gl.CULL_FACE);
    gl.enable(gl.DEPTH_TEST);
	*/
	
	
	
	// Setup many image planes
	//


var si  = computeSphereGridInfo();
var plane;

   // SUPER LOOPS!
    for (var yy = 0; yy <= si.imagesDownSphere; ++yy) 
	{
      //texRowIndex = tdlmath.modClamp(si.texYBase + yy, g_imagesDownGrid);
      //textures = g_textures[texRowIndex];
      for (var xx = -1; ++xx <= si.imagesAcrossSphere;  )
	  {   
        //texColIndex = tdlmath.modClamp(si.texXBase + xx, g_imagesAcrossGrid);
        //texturesPer.diffuseSampler = textures[texColIndex];

		plane = new THREE.Mesh(
	new THREE.PlaneGeometry(1, 1, 1, 1),
	//new THREE.MeshNormalMaterial({ wireframe: true }));
	shaderMaterial);
    scene.add(plane);
    plane.scale = new THREE.Vector3(g_imageScale, g_imageScale, 1);
	plane.position.x = (si.gridXOff + xx) * si.unit.width; 
	plane.position.y = (si.gridYOff + yy) * -si.unit.height;
	//theWidth * yy; + theWidth * 2;
	
      }
    }
    
    var pointLight = new THREE.PointLight(0xFFFFFF);
    pointLight.position = new THREE.Vector3(10, 50, 130);
    //scene.add(pointLight);

}

function animate()
{
    requestAnimationFrame(animate);
	
	//gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
	//renderer.clear();
    renderer.render(scene, camera);
}

	init();
animate();

	</script>
	
</html>